<template>
	<view>
		<uni-popup ref="popup" type="center" border-radius="10px">
			<uni-card note="Tips" style="width: 100%;">
				<template v-slot:title>
					<view
						style="padding: 5px;display: flex;justify-content: space-between;align-items: center;border-bottom: 2px solid #000;">
						<text style="font-weight: bold;">{{title}}</text>
						<uni-icons type="closeempty" size="16" color="#fff" @click="close"
							style="padding: 5px;background-color: #dd524d;border-radius: 5px;"></uni-icons>
					</view>
				</template>

				<view style="display: flex;gap: 10px;">
					<view class="">
						<view v-if="desc" class="gl-link-warning">
							<text>{{desc}}</text>
						</view>

						<uni-section title="时间范围" type="line">
							<uni-datetime-picker v-model="runTime" type="datetimerange" :start="minTime"
								@change="changeTime" style="z-index: 200;"></uni-datetime-picker>
						</uni-section>
						<uni-section title="团购标题" type="line">
							<uni-easyinput v-model="attrs.title" prefixIcon="font" placeholder="团购活动标题"
								@change="isBeReady" @clear="isBeReady" trim></uni-easyinput>
						</uni-section>
						<uni-section title="团购价格" subTitle="设置团购价格和结算金额,单位分" type="line">
							<view style="display: flex;gap: 10px;">
								<uni-easyinput v-model="attrs.aprice" type="digit" prefixIcon="wallet"
									placeholder="团购价格" @change="isBeReady" :clearable="false" trim></uni-easyinput>
								<uni-easyinput v-model="attrs.bprice" type="digit" prefixIcon="wallet-filled"
									placeholder="结算价格" @change="isBeReady" :clearable="false" trim></uni-easyinput>
							</view>
						</uni-section>
						<uni-section title="参团人数" type="line">
							<view style="display: flex;gap: 10px;">
								<uni-easyinput v-model="attrs.minth" type="number" prefixIcon="staff" placeholder="开团人数"
									@change="isBeReady" :clearable="false" trim></uni-easyinput>
								<uni-easyinput v-model="attrs.maxth" type="number" prefixIcon="staff-filled"
									placeholder="爆团人数" @change="isBeReady" :clearable="false" trim></uni-easyinput>
							</view>
						</uni-section>
						<uni-section title="文案" type="line">
							<uni-easyinput v-model="attrs.conent" type="textarea" prefixIcon="paperclip"
								placeholder="文案" trim></uni-easyinput>
						</uni-section>
						<uni-section title="商品信息" sub-title="选择团购商品SKU" type="line">
							<template v-slot:right>
								<view @click="changeSku"
									style="padding: 5px;border-radius: 5px;background-color: #00000011; display: flex;flex-direction: column;gap: 4px;">
									<uni-icons type="gift" size="30" color="#4cd964"></uni-icons>
									<text style="font-size: x-small;">选择商品</text>
								</view>
							</template>
							<uni-list-chat v-if="curSku" :title="curSku?.name ?? '未选择商品'"
								:avatar="sConf.cos + (curSku?.icon ?? '/media/default/default.png')"
								:note="curSku?.created" time="2020-02-02 20:20">
								<view class="chat-custom-right">
									<text class="chat-custom-text">￥{{((curSku?.money ?? 0) / 100).toFixed(2)}}</text>
								</view>
							</uni-list-chat>
							<view v-else
								style="display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 10px;gap: 10px;">
								<uni-icons type="info" size="60" color="#aaa"></uni-icons>
								<text style="color: #aaa;">没有商品</text>
							</view>
						</uni-section>
					</view>
					<view class="">
						<uni-section title="封面" type="line">
							<image :src="sConf.cos + (attrs.cover || '/media/default/cover.png')" mode="widthFix"
								@click="EventUploadCos" style="width: 256px;height: 144px;"></image>
						</uni-section>
					</view>
				</view>
				<template v-slot:actions>
					<view style="display: flex;justify-content:space-around;padding-top:100px;padding:20px 0;">
						<button class="gl-button gl-button-success" style="width: 180px;height: 32px;"
							:disabled="beReady" @click="eventSubmit">确认</button>
						<button class="gl-button gl-button-warning" style="width: 180px;height: 32px;"
							@click="close()">取消</button>
					</view>
				</template>
			</uni-card>

			<popSkuSelectVue ref="popSkuSelect" desc="选择SKU" @change="eventCurSku"></popSkuSelectVue>
			<cos-multiple-post ref="cosPost" :host="sConf.host" :token="sConf.auth.token" path="product" onHide once
				@upFinish="EventFinish"></cos-multiple-post>
		</uni-popup>
	</view>
</template>

<script>
	import psMethod from '@/common/psMethod';
	// import psCos from '@/common/psCos';
	import popSkuSelectVue from '@/components/sub-product/pop-sku-select.vue';
	export default {
		data() {
			return {
				title: '悦玺团购',
				sConf: getApp().globalData,
				minTime: 0,
				curSku: null,
				runTime: null,
				beReady: true,
				attrs: {
					id: null,
					pid: null,
					spu: null,
					sku: null,
					isrun: 1,
					outtime: null,
					starttime: null,
					title: null,
					aprice: 1,
					bprice: 0,
					minth: 1,
					maxth: 0,
					conent: null,
					cover: null
				}
			}
		},
		mounted() {
			let tmpData = Date.now()
			this.minTime = tmpData
		},
		props: {
			desc: {
				type: String,
				default: null
			}
		},
		components: {
			popSkuSelectVue
		},
		methods: {
			postTuan() {
				let tk = this.sConf.auth.token ?? ''
				let data = this.attrs;
				if (this.attrs.id) {
					psMethod.syncAuthenticatorRequest(`/admin/tuanList/${this.attrs.id}/`, 'PATCH', tk, data).then(res => {
						console.log('编辑团购活动->', res);
						this.$emit('change')
						this.close()
					})
				} else {
					psMethod.syncAuthenticatorRequest('/admin/tuanList/', 'POST', tk, data).then(res => {
						console.log('创建团购活动->', res);
						this.$emit('change')
						this.close()
					})
				}
			},
			eventSubmit() {
				let that = this
				let act = this.attrs.id ? '编辑' : '创建'
				uni.showModal({
					title: '确认',
					content: `是否要 ${act} 团购活动?`,
					success(r) {
						if (r.confirm) {
							that.postTuan()
						}
					}
				})
			},
			/**
			 * 是否还未就绪
			 */
			isBeReady() {
				if (!this.attrs.bprice) {
					this.attrs.bprice = 0
				}
				if (!this.attrs.maxth) {
					this.attrs.maxth = 0
				}
				if (!this.attrs.sku) {
					this.beReady = true
					return
				}
				if (!this.attrs.starttime || !this.attrs.outtime || !this.attrs.title) {
					this.beReady = true
					console.log('检测时间');
					return
				}
				if (!this.attrs.aprice || this.attrs.aprice < 1) {
					this.beReady = true
					console.log('检测价格');
					return
				}
				if (!this.attrs.minth || this.attrs.minth < 1) {
					this.beReady = true
					console.log('检测人数');
					return
				}
				this.beReady = false
			},
			changeTime(e) {
				console.log('changeTime', e);
				this.attrs.starttime = e[0]
				this.attrs.outtime = e[1]
				this.isBeReady()
			},
			eventCurSku(e) {
				console.log('eventCurSku', e);
				let tk = this.sConf.auth.token ?? ''
				psMethod.syncAuthenticatorRequest(`/admin/cargoSku/${e}/`, 'GET', tk, {}).then(res => {
					console.log('加载SKU', res);
					this.curSku = res.resmsg
					this.attrs.pid = res.resmsg.pid
					this.attrs.spu = res.resmsg.gid
					this.attrs.sku = res.resmsg.id
				}).catch(err => {
					console.log('加载SKU失败', err);
					this.curSku = null
				}).finally(() => {
					this.isBeReady()
				})
			},
			changeSku() {
				this.$refs.popSkuSelect.open()
			},
			open(e = null) {
				if (!e) {
					this.attrs.id = null
				} else {
					console.log(e);
					this.attrs = e
					this.curSku = e.sub_sku
					this.runTime = [e.starttime, e.outtime]
				}
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			/**
			 * 传图回调
			 */
			EventFinish(e) {
				console.log('EventFinish', e);
				this.attrs.cover = e[0]
				this.isBeReady()
			},
			EventUploadCos() {
				console.log('EventUploadCos');
				this.$refs.cosPost.open()
			},
		}
	}
</script>

<style lang="scss" scoped>

</style>